<template>
  <UserOption></UserOption>
  <!-- <div class="ResuAlls-panel">
    <span>暂无数据</span>
  </div> -->
  <!-- <div class="div-background-rolling">
    <el-scrollbar class="infinite-list">
      <div v-for="(it, imgindex) in State.ProductActivationListArr" class="infinite-itemitem" :key="imgindex">
        <div class="shortName" style="float:left">
          <a-tooltip>
            <template #title>{{ it.shortName }}</template>
<p class="txt" :class="selectProduct === it.number ? 'isChoice' : 'unChoice'" style="margin-bottom: 6px;">{{
  it.shortName
  }}</p>
</a-tooltip>
</div>
<div class="rolling-panel" :class="selectProduct === it.number ? 'rolling-panel-bordel' : ''"
  @click="SelectProducItem(it, imgindex)">
  <div class="rolling-panel-img">
    <img v-bind:src="'/img/productLib/' + it.number + '.png' || '/img/productLib/404.png'" class="img-background-imgs"
      v-if="it.id">
  </div>
  <div class="rolling-panel-span" v-if="selectProduct === it.number">
    <p :class="selectProduct === it.number ? 'rolling-panel-bordel-1' : ''">
      {{ it.vehicleModel }}<span class="shuText">|</span><span>No.</span>{{ it.number.slice(-3) }}
    </p>
  </div>
  <div v-else class="rolling-panel-span-1">
    <p :class="selectProduct === it.number ? 'rolling-panel-bordel-1' : ''">
      {{ it.vehicleModel }}
    </p>
  </div>
</div>
</div>
</el-scrollbar>
</div> -->
  <!-- 产品列 -->
  <ProductActivationList></ProductActivationList>
  <div class="ClassList" v-if="types == 1">
    <div>
      <img src="@/assets/img/other/icon-班级列表.png" class="Simulation-img-Classlist" /><span
        class="Simulation-Classlist-span">班级列表</span>
    </div>
    <div class="Simulation-Classlist-panel-moder">
      <el-scrollbar class="infinite-list">
        <div class="Simulation-Classlist-panel-span-moder" v-for="(its, classindex) in State.AllClass" :key="classindex"
          :class="selectedIndex == classindex ? 'active' : ''" @click="GetClassInformation(classindex)">
          <span class="Simulation-Classlist-span-name">{{ its.name }}</span>
        </div>
      </el-scrollbar>
    </div>
  </div>
  <div v-if="types == 2">
    <!-- 学生 -->
    <div v-if="State.ScoreDetailsStudentId.taskTotalCount == 0" class="nothave haveTwo">
      暂无数据
    </div>
    <div class="DataList StudentData" v-else>

      <div class="newDataBox">
        <p class="dataBox_name StuNameTop">合格率</p>
        <p class="data_val StuVal">{{ (State.ScoreDetailsStudentId.completePercent * 100).toFixed(2) }}<span
            class="min">%</span>
        </p>
      </div>

      <div class="newDataBox two">
        <p class="dataBox_name StuNameTop">训练平均成绩</p>
        <p class="data_val StuVal">{{ State.ScoreDetailsStudentId.trainAverageScore.toFixed(2) }}<span
            class="min">分</span></p>
      </div>
      <div class="newDataBox three">
        <p class="dataBox_name StuNameTop">训练完成率</p>
        <p class="data_val StuVal">{{ (State.ScoreDetailsStudentId.trainPassPercent * 100).toFixed(2) }}<span
            class="min">%</span>
        </p>
      </div>
      <div class="newDataBox four">
        <p class="dataBox_name StuNameTop">比赛通过率</p>
        <p class="data_val StuVal">{{ (State.ScoreDetailsStudentId.contestPassPercent * 100).toFixed(2) }}<span
            class="min">%</span></p>
      </div>





      <div class="dataBox StuBox">
        <p class="dataBox_name StuName">任务总数量</p>
        <p class="data_val StuVal">{{ State.ScoreDetailsStudentId.taskTotalCount }}</p>
      </div>

      <div class="dataBox two StuBox">
        <p class="dataBox_name StuName">考核平均成绩</p>
        <p class="data_val StuVal">{{ State.ScoreDetailsStudentId.examAverageScore.toFixed(2) }}<span
            class="min">分</span>
        </p>
      </div>

      <div class="dataBox three StuBox">
        <p class="dataBox_name StuName">考核完成率</p>
        <p class="data_val StuVal">{{ (State.ScoreDetailsStudentId.examPassPercent * 100).toFixed(2) }}<span
            class="min">%</span>
        </p>
      </div>

      <div class="dataBox four StuBox">
        <p class="dataBox_name StuName">比赛平均得分</p>
        <p class="data_val StuVal">{{ State.ScoreDetailsStudentId.contestAverageScore.toFixed(2) }}<span
            class="min">分</span></p>
      </div>
      <div class="dataBox2"></div>
      <div class="dataBox2 two"></div>
      <div class="dataBox2 three"></div>
      <div class="dataBox2 four"></div>

      <div class="text_list">
        <!-- <p class="tit">完成次数</p>
      <p class="val">1999</p> -->
        <p class="tit">软件使用次数</p>
        <p class="val">{{ State.ScoreDetailsStudentId.taskTotalCount * 2 }}</p>
        <p class="tit">软件运行时长</p>
        <p class="val">{{ TM(State.ScoreDetailsStudentId.taskTotalCount * 1200) }}</p>
      </div>
    </div>
  </div>
  <div v-else>
    <!-- 教师 -->
    <div v-if="State.ScoreDetails[selectedIndex].taskTotalCount == 0" class="nothave">
      暂无数据
    </div>
    <div class="DataList" v-else>
      <div class="dataBox">
        <p class="dataBox_name">任务总数量</p>
        <p class="data_val">{{ State.ScoreDetails[selectedIndex].taskTotalCount }}</p>
      </div>

      <div class="dataBox two">
        <p class="dataBox_name">任务平均成绩</p>
        <p class="data_val">{{ State.ScoreDetails[selectedIndex].averageScore.toFixed(2) }}<span class="min">分</span>
        </p>
      </div>

      <div class="dataBox three">
        <p class="dataBox_name">任务完成率</p>
        <p class="data_val">{{ (State.ScoreDetails[selectedIndex].passPercent * 100).toFixed(2) }}<span
            class="min">%</span>
        </p>
      </div>

      <div class="dataBox four">
        <p class="dataBox_name">任务平均时间</p>
        <p class="data_val">{{ TM((State.ScoreDetails[selectedIndex].taskTime /
          State.ScoreDetails[selectedIndex].taskTotalCount)) }}</p>
      </div>
      <div class="dataBox2"></div>
      <div class="dataBox2 two"></div>
      <div class="dataBox2 three"></div>
      <div class="dataBox2 four"></div>

      <div class="text_list">
        <!-- <p class="tit">完成次数</p>
      <p class="val">1999</p> -->
        <p class="tit">软件使用次数</p>
        <p class="val">{{ State.ScoreDetails[selectedIndex].taskTotalCount * 50 }}</p>
        <p class="tit">软件运行总时长</p>
        <p class="val">{{ TM((State.ScoreDetails[selectedIndex].taskTime * 50)) }}</p>
      </div>
    </div>
  </div>
  <!-- =======搜索======= -->
  <div :class="isSearch ? 'SearchClick' : 'Search'">
    <img class="searchBtn" src="../../public/img/搜索.png" alt="">
    <form action="">
      <input class="searchIpt" placeholder="搜索" type="text" @focus="IptFocus" @blur="IptBlur" v-model="searchVal"
        @input="IptChange" @keydown.enter="handleEnter">
    </form>
    <img class="searchClose" v-show="searchVal != ''" src="../../public/img/关闭.png" @click="cancelSearch" alt="">
  </div>
</template>

<script>

import bus from "@/bus";
import { defineComponent, reactive, ref, toRef, toRefs, onMounted, watch } from "vue";
import { postData, bubbleSort, deepClone, DownloadDisplay } from "../assets/js/pubilcs.js";
import HomeContent from '../components/HomeContent.ts';
export default defineComponent({
  name: "Model",
  components: {

  },
  setup() {
    let searchVal = ref('')
    let isSearch = ref(false)
    let temporaryList = []
    let selectProduct = ref(0)
    let pratuctArr = []
    // =======
    let State = reactive({
      ProductActivationListArr: [],
      AllClass: [],
      ScoreDetails: [{
        taskTotalCount: 0,
        averageScore: 0,
        passPercent: 0,
        taskTime: 0,
        useTotalCount: 0,
        useTotalTime: 0
      }],
      ScoreDetailsStudentId: {
        completePercent: 0,
        taskTotalCount: 0,
        examAverageScore: 0,
        examPassPercent: 0,
        useTotalCount: 0,
        useTotalTime: 0,
        trainAverageScore: 0,
        trainPassPercent: 0,
        contestPassPercent: 0,
        contestAverageScore: 0
      },
    })
    //选择产品index
    let selectindex = ref(0)
    let selectedIndex = ref(0)
    let types = sessionStorage.getItem("role")
    //初始化获取数据
    async function InitDate() {
      if (sessionStorage.getItem("ProductActivationListArr")) {
        //有存储值时读取储存的值
        State.ProductActivationListArr = bubbleSort(JSON.parse(sessionStorage.getItem("ProductActivationListArr")))
        console.log(State.ProductActivationListArr, '成绩模块本地获取');

        if (sessionStorage.getItem('productindex')) {
          let index = parseInt(sessionStorage.getItem("productindex"))
          selectindex.value = index

          let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[index].productId, ShortName: State.ProductActivationListArr[index].number })
          //获取激活数据
          State.ProductActivationListArr[index].Status = rep.Status
          let id = State.ProductActivationListArr[index].productId
          if (State.ProductActivationListArr[index].Status === 0) {
            //选中产品
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)
          } else if (State.ProductActivationListArr[index].Status === 1) {
            //选中产品
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)
          }
        } else {
          //选中第一个产品
          selectindex.value = 0
          let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[0].productId, ShortName: State.ProductActivationListArr[0].number })
          //获取激活数据
          State.ProductActivationListArr[0].Status = rep.Status
          if (State.ProductActivationListArr[0].Status === 1) {
            sessionStorage.setItem("productId", id)
          } else if (State.ProductActivationListArr[0].Status === 0) {
            let id = State.ProductActivationListArr[0].productId
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)
          }
        }
      } else {
        if (sessionStorage.getItem('productindex')) {
          let index = parseInt(sessionStorage.getItem("productindex"))
          selectindex.value = index
        } else {
          //选中第一个产品
          selectindex.value = 0
        }
        //获取平台服务器数据
        postData("/api/ProductAuthority/GetAllByUserId", JSON.stringify({ UserId: sessionStorage.getItem("userid") }), sessionStorage.getItem("token")).
          then(function (res) {
            if (res.success) {
              State.ProductActivationListArr = res.result.result
              // console.log(State.ProductActivationListArr, '服务器获取')
              sessionStorage.setItem('scoreResult', JSON.stringify(State.ProductActivationListArr))
              if (res.result.result.length === 0) {
                //方便直接查找数据为空值
                sessionStorage.setItem("productId", 99999)
                bus.$emit("UpdateHomeTaskPanel", "Updates")
                return
              } else {
                //排序
                State.ProductActivationListArr = bubbleSort(State.ProductActivationListArr)
              }
            }
          })
          .catch((error) => {

          });
      }
    }
    //选择产品
    function SelectProducItem(val, imgindex) {
      selectProduct.value = val.number
      selectindex.value = imgindex
      sessionStorage.setItem("productindex", imgindex)
      sessionStorage.setItem("productId", val.productId)

      GetTeacherAllClass()
    }
    function GetClassInformation(classindex) {
      selectedIndex.value = classindex
      ObtainingGrades(State.AllClass[classindex].id)
    }
    //获取所有老师的班级
    function GetTeacherAllClass() {
      //每次选择产品时,默认选中第一个
      selectedIndex.value = 0
      //用户ID
      let userid = sessionStorage.getItem("userid")
      //产品ID
      let ProductId = sessionStorage.getItem("productId")
      //教师角色
      if (sessionStorage.getItem("role") === '1') {
        postData("/api/CourseManage/GetCourseByCreatorId", JSON.stringify({ creatorId: userid, ProductId: ProductId }),
          sessionStorage.getItem("token")
        )
          .then(function (response) {
            if (response.result.result.courseGroup) {
              //获取所有的班级
              State.AllClass = response.result.result.courseGroup
              console.log(State.AllClass);
              ObtainingGrades(State.AllClass[0].id)
            } else {
              //设置班级数据为空
              State.AllClass = []
              State.ScoreDetails = [{
                taskTotalCount: 0,
                averageScore: 0,
                passPercent: 0,
                taskTime: 0,
                useTotalCount: 0,
                useTotalTime: 0
              }]
            }
          })
          .catch((error) => {
            console.log(error)
          });
      }
      //学生角色
      if (sessionStorage.getItem("role") === '2') {
        postData("/api/CourseManage/GetCourseByUserId", JSON.stringify({ userId: userid, ProductId: ProductId }),
          sessionStorage.getItem("token")
        )
          .then(function (response) {
            if (response.result.result.courseGroup) {
              //获取所有的班级
              State.AllClass = response.result.result.courseGroup
              console.log(State.AllClass);
              ObtainingGrades(State.AllClass[0].id)
            } else {
              //设置班级数据为空
              State.AllClass = []
              State.ScoreDetailsStudentId = {
                completePercent: 0,
                taskTotalCount: 0,
                examAverageScore: 0,
                examPassPercent: 0,
                useTotalCount: 0,
                useTotalTime: 0,
                trainAverageScore: 0,
                trainPassPercent: 0,
                contestPassPercent: 0,
                contestAverageScore: 0
              }
            }
          })
          .catch((error) => {
            console.log('学生角色出错', error)
          });
      }
    }
    //时间转
    function TM(ms) {
      let h = Math.floor(ms / 60 / 60)
      let m = Math.floor(ms / 60)
      let s = Math.floor(ms)

      if (h === 1) {
        // 当时间刚好是60分钟时，让它以mm:ss格式显示,即显示60:00,而不是显示01:00:00
        if (m / 60 === 1 && s % 60 === 0) {
          h = ''
          m = '60:'
        } else {
          h = '01:'
          m = addZero(m % 60) + ':'
        }
        s = addZero(s % 60)
      } else {
        h = h === 0 ? '' : addZero(h) + ':'
        m = addZero(m % 60) + ':'
        s = addZero(s % 60)
      }
      return h + m + s
    }
    // 进行补0操作
    function addZero(n) {
      return n < 10 ? '0' + n : n
    }
    //获取成绩
    function ObtainingGrades(id) {

      //用户ID
      let userid = sessionStorage.getItem("userid")
      //产品ID
      let ProductId = sessionStorage.getItem("productId")
      //路径
      let apiList = ''
      //  教师
      if (sessionStorage.getItem("role") === '1') {
        apiList = '/api/Statistical/GetByTeacherId'
      } else {
        //学生
        apiList = '/api/Statistical/GetByStudentId'
      }

      postData(apiList, JSON.stringify({ userId: userid, SchoolId: id, ProductId: ProductId }),
        sessionStorage.getItem("token")
      )
        .then(function (response) {
          console.log(response.result.result);
          if (sessionStorage.getItem("role") === '1') {
            if (response.result.result.group.length > 0) {
              State.ScoreDetails = response.result.result.group
            } else {
              State.ScoreDetails = [{
                taskTotalCount: 0,
                averageScore: 0,
                passPercent: 0,
                taskTime: 0,
                useTotalCount: 0,
                useTotalTime: 0
              }]
            }
          } else {
            if (response.result.result) {
              State.ScoreDetailsStudentId = response.result.result
            } else {
              State.ScoreDetailsStudentId = {
                completePercent: 0,
                taskTotalCount: 0,
                examAverageScore: 0,
                examPassPercent: 0,
                useTotalCount: 0,
                useTotalTime: 0,
                trainAverageScore: 0,
                trainPassPercent: 0,
                contestPassPercent: 0,
                contestAverageScore: 0
              }
            }
          }

        })
        .catch((error) => {
          console.log(error)
        });
    }

    // ==================
    // 搜索聚焦
    function IptFocus() {
      HomeContent.Default.searchVal.value = searchVal.value
      isSearch.value = true
      pratuctArr.value = JSON.parse(sessionStorage.getItem("shouyeDate"))
    }
    // 搜索失焦
    function IptBlur() {
      HomeContent.Default.searchVal.value = searchVal.value
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
    }
    // 搜索改变
    async function IptChange() {
      // // console.log('searchVal',searchVal.value);
      // temporaryList.value = []
      // State.ProductActivationListArr.forEach(element => {
      //   // console.log('搜索改变',element,element.number.slice(-3));

      //   if (element.shortName.includes(searchVal.value) || element.number.slice(-3).includes(searchVal.value)) {
      //     temporaryList.value.push(element)
      //   }
      // });
      // State.ProductActivationListArr = temporaryList.value
      HomeContent.Default.searchVal.value = searchVal.value
      HomeContent.Default.searchList.value = []
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
      pratuctArr.value.forEach(element => {
        if (element.shortName.includes(HomeContent.Default.searchVal.value) || element.number.slice(-3).includes(HomeContent.Default.searchVal.value)) {
          HomeContent.Default.searchList.value.push(element)
        }
      });
      console.log('成绩报表结果', HomeContent.Default.searchList.value);
    }
    //监听搜索框的值
    watch(() => searchVal.value, (val, old) => {
      if (val == '') {
        State.ProductActivationListArr = JSON.parse(sessionStorage.getItem("scoreResult"))
      } else {
        State.ProductActivationListArr = JSON.parse(sessionStorage.getItem("scoreResult"))
        IptChange()
      }
    },
      { deep: true }
    )
    //监听选择的产品
    watch(() => HomeContent.Default.productNumber.value, (val, old) => {
      SelectProducItem(JSON.parse(sessionStorage.getItem('producted')), sessionStorage.getItem('productIdex'))
    },
      { deep: true }
    )
    // 取消搜索
    function cancelSearch() {
      searchVal.value = ''
      isSearch.value = false
      HomeContent.Default.searchVal.value = ''
    }
    // enter事件
    function handleEnter(event) {
      event.preventDefault(); // 阻止默认行为
      console.log('搜索的enter键盘', event);
    }
    onMounted(async () => {
      if (HomeContent.Default.searchVal.value != '') {
        searchVal.value = HomeContent.Default.searchVal.value
        IptFocus()
        IptChange()
      } else {
        HomeContent.Default.searchVal.value = searchVal.value
      }
      //初始化数据
      InitDate()
      GetTeacherAllClass()
      ObtainingGrades()
    });
    return {
      State,
      selectindex,
      SelectProducItem,
      GetTeacherAllClass,
      GetClassInformation,
      selectedIndex,
      ObtainingGrades,
      TM,
      types,
      isSearch,
      IptFocus,
      IptBlur,
      IptChange,
      cancelSearch,
      searchVal,
      temporaryList,
      selectProduct,
      pratuctArr,
      handleEnter,
    };
  },
});
</script>
<style lang="less">
.shortName {
  // width: 245px;
  // height: 20px;
  line-height: 20px;
  z-index: 2;
  // display: inline-block;
  position: absolute;
  font-size: 16px;
  top: 15px;
  left: 20px;
  text-align: start;
}

.txt {
  width: 245px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.isChoice {
  color: #e8e8e8;
}

.unChoice {
  color: #3389de;
}

.ResuAlls-panel {
  position: absolute;
  width: 1720px;
  height: calc(100% - 10%);
  left: 160px;
  top: 100px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}

.nothave {
  position: absolute;
  left: 520px;
  top: 270px;
  width: 1360px;
  height: 780px;
  background: #ffffff;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
  line-height: 780px;
}

.haveTwo {
  height: 950px;
  line-height: 950px;
  top: 100px;
}

//面板栏
.div-background-rolling {
  position: absolute;
  width: 360px;
  height: 100%;
  left: 120px;
  background: #e8e8e8;
}

.div-background-rolling .infinite-list {
  position: absolute;
  height: 88%;
  width: 95%;
  left: 20px;
  top: 100px;
}

.div-background-rolling .el-scrollbar__wrap {
  overflow-x: hidden;
}

.div-background-rolling .infinite-itemitem {
  position: relative;
  width: 320px;
  height: 180px;
  margin-top: 20px;
  cursor: pointer;
}

.div-background-rolling .infinite-itemitem:nth-child(1) {
  margin-top: 0px;
}

.rolling-panel {
  position: absolute;
  width: 320px;
  height: 180px;
  border-radius: 15px;
  background: #FFFFFF;
  overflow: hidden;
}

.rolling-panel-img {
  position: absolute;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rolling-panel-span {
  position: absolute;
  width: 120px;
  height: 70%;
  left: 209px;
  // left: 200px;
  // top: 40px;
  top: 88px;
  display: flex;
  flex-direction: column;
  // justify-content: space-around;
}

// .rolling-panel-span>p:nth-child(1) {
//   width: 100%;
//   height: 44px;
//   font-size: 16px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   color: #ffffff;
//   background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
//   background-clip: text;
//   -webkit-background-clip: text;
//   -webkit-text-fill-color: transparent;
// }

.rolling-panel-span>p:nth-child(1) {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  text-align: center;
}

.rolling-panel-span>p:nth-child(2) {
  width: 60%;
  // height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #ffffff;
  margin-left: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

.rolling-panel-span-1 {
  position: absolute;
  width: 120px;
  height: 50%;
  left: 200px;
  // top: 40px;
  top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

// .rolling-panel-span-1>p:nth-child(1) {
//   width: 100%;
//   height: 44px;
//   font-size: 16px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   color: #ffffff;
//   background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
//   background-clip: text;
//   -webkit-background-clip: text;
//   -webkit-text-fill-color: transparent;
// }

.rolling-panel-span-1>p:nth-child(1) {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  text-align: center;
}

.img-background-imgs {
  max-width: 80%;
  max-height: 80%;
  margin-left: 10px;
  margin-bottom: -35px;
  // width: auto;
  // height: auto;
  // margin: auto;
}

.img-item-Open {
  position: absolute;
  width: 100px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);

}

.itemitem-class-span {
  position: absolute;
  font-size: 16px;
}

.rolling-panel-bordel {
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
  border-radius: 20px;
}

.rolling-panel-bordel-1 {
  background: #ffffff !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


.ClassList {
  /*班级面板大小*/
  position: absolute;
  left: 520px;
  top: 100px;
  width: 1360px;
  height: 140px;
  background: #ffffff;
  border-radius: 16px;
}

/*班级图标*/
.Simulation-img-Classlist {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  left: 19px;
  top: 19px;
}

/*班级文字*/
.Simulation-Classlist-span {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

/*班级设置*/
.Simulation-Classlist-panel-moder {
  position: absolute;
  width: 1340px;
  height: 80px;
  top: 40px;
}

/*班级设置*/
.Simulation-Classlist-panel-moder .infinite-list {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*将el-scrollbar__vie的子元素设置成为块级元素*/
.Simulation-Classlist-panel-moder .el-scrollbar__view {
  display: flex;
  flex-wrap: wrap;
}

/*每一个小班级的设置*/
.Simulation-Classlist-panel-span-moder {
  width: 120px;
  height: 60px;
  margin-left: 20px;
  margin-top: 18px;
  // background: rgba(129, 133, 156, 0.5);
  background: rgba(242, 243, 245, 0.5);
  border-radius: 10px;
  font-size: 18px;
  color: #A2A5B5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.active {
  color: #ffffff;
  background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
}

/*每一个小班级的设置*/
.Simulation-Classlist-panel .el-scrollbar__wrap {
  overflow-x: hidden;
}

.Simulation-Classlist-panel .Simulation-createclass-span {
  margin-left: -15px;
  margin-bottom: 5px;
}


.DataList {
  /*班级面板大小*/
  position: absolute;
  left: 520px;
  top: 270px;
  width: 1360px;
  height: 780px;
  background: #ffffff;
  border-radius: 16px;
}

.dataBox {
  position: absolute;
  left: 30px;
  top: 0px;
  width: 250px;
  height: 400px;
  border-radius: 0 0 125px 125px;
  // background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(62, 144, 244, 0.5));
  background: linear-gradient(145deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0)50%, rgba(62, 144, 244, 0.5)100%);
  z-index: 10;
}

.dataBox2 {
  position: absolute;
  left: 30px;
  bottom: 100px;
  width: 250px;
  height: 400px;
  border-radius: 125px 125px 0 0;
  background: linear-gradient(325deg, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0)30%, rgba(62, 144, 244, 0.5)100%);

}

.dataBox_name {
  padding-top: 150px;
  font-size: 26px;
  color: #959595;
}

.data_val {
  padding-top: 80px;
  font-size: 48px;
  color: #325efb;
  font-weight: 600;
}

.text_list {
  position: absolute;
  right: 50px;
  bottom: 20px;
  text-align: left;
}

.tit {
  font-size: 18px;
  color: #999;
  margin: 0;
}

.val {
  font-size: 24px;
  color: #6c83d5;
}

.min {
  font-size: 14px;
  color: #555;
}

.StudentData {
  top: 90px;
  height: 950px;
}

.StuBox {
  top: 160px;
}

.StuName {
  padding-top: 220px;
}

.StuVal {
  padding-top: 10px;
}

.newDataBox {
  position: absolute;
  left: 30px;
  top: 140px;
  width: 250px;
}

.StuNameTop {
  padding-top: 0px;
}

.two {
  left: 310px;
}

.three {
  left: 590px;
}

.four {
  left: 870px;
}

.Search {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ABABAB;
  display: -webkit-inline-box;
  z-index: 1000;
}

.SearchClick {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #3389EC;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #080808;
  display: -webkit-inline-box;
  z-index: 1000;
}

.searchIpt {
  width: 640px;
  height: 40px;
  border: none;
}

.searchIpt::placeholder {
  color: #DCDFE6;
}

.searchIpt:focus-visible {
  outline: none;
  color: #080808;
}

.searchBtn {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.searchClose {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.shuText {
  font-size: 13px;
  margin-left: 2px;
  margin-right: 2px;
}
</style>
